<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>酒店系统</title>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<script>
    $(function () {
        var username = $("#userinfo").text();
        if (username != null && username != "") {
            $("#login").hide();
            $("#registerUser").hide();
            $("#logout").show();
            $("#userinfo").show();
        } else {
            $("#login").show();
            $("#registerUser").show();
            $("#logout").hide();
            $("#userinfo").hide();
        }


        $(".submit").click(function () {
            var userData = $("#userForm").serializeArray();
            var url = "userAction!login";
            $.post(url, userData, function (data) {
                if (data != null && data != "") {
                    $("#myModal").modal("hide");
                    $("#login").hide();
                    $("#registerUser").hide();
                    $("#logout").show();
                    $("#userinfo").show().text(data.username);
                    document.getElementById('frame').contentWindow.location.reload(true);
                }
            })
        });

        $("#registerUser").click(function () {
            $("#register").modal("show")
        });

    })
</script>
<body style="overflow-x: hidden;overflow-y: hidden;">
<!--头部开始 -->
<div class="head">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">在线酒店预订管理系统</a>
            </div>
            <div>
                <ul class="nav navbar-nav navbar-left">
                    <li id="search" class="active"><a>首页</a></li>
                    <li id="orderList"><a>订单操作</a></li>
                    <li id="news"><a>新闻</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li id="login" data-toggle="modal" data-target="#myModal"><a>登录</a></li>
                    <li id="registerUser" data-toggle="modal" data-target="#register"><a>注册</a></li>
                    <li id="userinfo"><a>${user.userName}</a></li>
                    <li id="logout"><a>登出</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>
<div style="height: auto">
    <iframe src="hotelAction!searchCity" frameborder="no" id="frame" name="frame"
            style="width: 100%;height: 100%;"></iframe>
</div>
<%--用户登录模态框--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">用户登录</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" id="userForm">
                    <table class="table">
                        <tr>
                            <td>账号：</td>
                            <td><input type="text" name="user.userName" class="form-control" placeholder="请输入账号">
                            </td>
                        </tr>
                        <tr>
                            <td>密码：</td>
                            <td><input type="password" name="user.password" class="form-control" placeholder="请输入密码">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger regiset">注册</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary submit">登录</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<%--用户注册模态框--%>
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">用户注册</h4>
            </div>
            <div class="modal-body">
                <form action="shop/frontLoginAction!register" method="post" id="registerForm">
                    <table class="table">
                        <tr>
                            <td>用户名：</td>
                            <td>
                                <input type="text" name="user.userName" class="form-control" placeholder="请输入用户名">
                            </td>
                        </tr>
                        <tr>
                            <td>密码：</td>
                            <td>
                                <input type="password" name="user.password" class="form-control" placeholder="请输入密码">
                            </td>
                        </tr>
                        <tr>
                            <td>身份证号：</td>
                            <td>
                                <input type="text" name="user.idCard" class="form-control"
                                       placeholder="请输入身份证号">
                            </td>
                        </tr>
                        <tr>
                            <td>性别：</td>
                            <td>
                                <label class="checkbox-inline">
                                    <input type="radio" name="user.userSex" value="1" checked>男
                                </label>
                                <label class="checkbox-inline">
                                    <input type="radio" name="user.userSex" value="0">女
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td>电话号码：</td>
                            <td>
                                <input type="text" name="user.telephone" class="form-control" placeholder="请输入电话号码">
                            </td>
                        </tr>
                        <tr>
                            <td>地址：</td>
                            <td>
                                <input type="text" name="user.email" class="form-control" placeholder="请输入地址">
                            </td>
                        </tr>
                        <tr>
                            <td>邮箱地址：</td>
                            <td>
                                <input type="text" name="user.password" class="form-control" placeholder="请输入邮箱地址">
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary register">注册</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="application/javascript">
    $(function () {
        //查找城市
        $("#search").click(function () {
            var url = "hotelAction!searchCity";
            $("#frame").attr("src", url);
        });
        //新闻
        $("#news").click(function () {
            var url = "newsAction!newsList";
            $("#frame").attr("src", url);
        });
        //订单列表
        $("#orderList").click(function () {
            var url = "orderAction!orderList";
            $("#frame").attr("src", url);
        });
        //用户操作
        $("#userInfo").click(function () {
            var url = "userAction!showUserInfoView?state=update";
            $("#frame").attr("src", url);
        });
        //登出
        $("#logout").click(function () {
            var url = "userAction!logout";
            $("#frame").attr("src", url);
        })
    })
</script>
</body>
</html>